<template>
  <div>
      <!-- <span v-for="(v,i) in this.$store.state.arr" :key="i">{{v.user_name}}</span> -->
       <div class="top">
           <div class="iconfont" @click="fun()">
              <van-icon name="arrow-left"/>
            </div>
个人资料
       </div>
       <div class="center" v-for="(v,i) in this.$store.state.mym.arr" :key="i">
          <div class="dis">
              头像
              <div>
                  <span><img :src="v.head" alt=""></span>
                  &gt;
              </div>
          </div>
          <div class="dis">
              用户名
              <div>
                  <span>{{v.nickname}}</span>
                  &gt;
              </div>   
          </div>
          <div class="dis">
            性别
            <div>
                <span>{{v.sex}}</span>
                &gt;
            </div>
           
          </div>
          <div class="dis">
              绑定邮箱
              <span>{{v.phone}}</span>
          </div>
          <div class="dis address"><router-link :to='{name:"mypersonaddress",query:{"text":"收货地址"}}'><span>收货地址</span>&gt;</router-link></div>
          <!-- <div class="dis address"><router-link to=""><span>收货地址</span></router-link>&gt;</div> -->
          <div class="dis address"><span>账号管理</span>&gt;</div>
          <div class="dis address"><span>协议与说明</span>&gt;</div>
       </div>
       <div class="bottom">
          <div class="dis">
              推送通知
              <div>
                  <span>已开启</span>
                    &gt;
 
              </div>
          </div>
          <div class="dis">
              个性化推荐
              <div>
                  <span>开关</span>
                    &gt;
              </div>
          </div>
       </div>
       <button @click="nolog()">退出登录</button>
  </div>
</template>

<script>
export default {
   mounted() {
    //使用vuex发送异步请求---->dispatch触发actions发送异步
    // this.$store.dispatch("mymData",{url:"/data/person"})
    // this.$store.dispatch("mymData",{url:"http://81.68.226.70:8050/coffee/"});
      
    },
    methods: {
        fun(){
            this.$router.go(-1)
        },
        nolog(){
          if(window.localStorage.getItem("token")!=null&& window.localStorage.getItem("token")!=undefined){
            let data = {"url":"http://81.68.226.70:8050/user/logout/","aaa":{"Authorization":"Token"+window.localStorage.getItem("token")}}
            console.log(data.url,data.aaa)
            this.$store.dispatch("nolog",data)
          }else{
              this.$router.push("/login")
          }

      }
    },
     data() {
        return {
        checked: true,
        };
  },
}
</script>

<style scoped>
.van-cell__title{
    color: orange;
}
div{
    padding: 0 0.1rem;
    box-sizing: border-box;
    overflow-y: auto;
}
.top{
    width: 2.2rem;
    height: 0.8rem;
    font-size:0.18rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}
.top .iconfont{
    font-size: 0.3rem;
}
.center{
    height: 4.75rem;
    padding: 0.2rem 0.2rem 0.3rem;
    box-sizing: border-box;
    background: #fff;
    
}

.center .dis, .bottom .dis{
    height: 0.5rem;
    margin-bottom: 0.1rem;
    display: flex;
    color: #8f8f8f;
    justify-content: space-between;
    align-items: center;
    
}
.center .dis img{
    width: 0.45rem;
  height: 0.45rem;
  vertical-align:middle;
  background: #bfbebb;
  border-radius: 50%;
  margin-right: 0.1rem;
}

.center .address>a{
  color: #8f8f8f;
}
.center .address>a>span{
   margin-right: 2.7rem;
}

.bottom{
    box-sizing: border-box;
    padding: 0.2rem 0;
    background: #fff;
    margin: 0.1rem 0 0.3rem;  
    
}
button{
    width: 100%;
    height: 0.45rem;
    font-size: 0.2rem;
    color: #fff;
    background:#6d87c4;
    border-radius: 0.2rem;
    border: none;
}
</style>